<%--
  Created by IntelliJ IDEA.
  User: zlb
  Date: 2018/12/30
  Time: 12:00
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>新增自动发送卡券规则</title>
    <link rel="stylesheet" href="static/lib/layui/css/layui.css">
    <script type="text/javascript" src="static/lib/layui/layui.js"></script>
    <script type="text/javascript" src="static/js/Constants.js"></script>
    <script type="text/javascript" src="static/js/boUtil.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <style>
        .pianyi {
            margin-left: 65px;
        }
    </style>
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>新增自动卡券发送规则</legend>
</fieldset>

<form class="layui-form" lay-filter="ruleForm" action="" readonly=true>
    <div class="layui-form-item pianyi">
        <div class="layui-inline">
            <label class="layui-form-label ">商户编号：</label>
            <div class="layui-input-inline">
                <input type="text" id="shopId" name="shopId" lay-verify="shopId" autocomplete="off" placeholder="商户编号"
                       class="layui-input ">
            </div>
        </div>

        <div class="layui-inline">
            <label class="layui-form-label">规则名称：</label>
            <div class="layui-input-inline">
                <input type="text" id="ruleName" name="ruleName" lay-verify="ruleName" autocomplete="off"
                       placeholder="规则名称"
                       class="layui-input">
            </div>
        </div>
    </div>
    <div class="layui-inline" style="margin-top: -25px;"><label class="layui-form-label">筛选条件：</label></div>
    <div class="layui-form-item pianyi">
        <label class="layui-form-label">关注状态：</label>
        <div class="layui-inline">
            <input type="radio" id="subscribeStatus" name="subscribeStatus" value="1" title="已关注" checked="">
        </div>
    </div>
    <div class="layui-form-item pianyi">
        <label class="layui-form-label">消费时间：</label>
        <div class="layui-inline">
            <input type="radio" name="consumeInfo" value="7" title="近一周">
            <input type="radio" name="consumeInfo" value="14" title="近二周">
            <input type="radio" name="consumeInfo" value="21" title="近三周">
            <input type="radio" name="consumeInfo" value="30" title="近一个月">
            <input type="radio" name="consumeInfo" value="60" title="近二个月">
            <input type="radio" name="consumeInfo" value="90" title="近三个月">
        </div>

        <div class="layui-inline" id="condiv" style="display: none">
            <input id="consumeInfoLatestDayVal" type="radio" name="consumeInfo" value="" title="" checked="">
        </div>

        <div class="layui-inline" style="margin-top: 1px;font-size: 15px;">
            <div class="site-demo-button" id="layerDemo" style="margin-bottom: 0;">
                <a data-method="offset" data-type="t" class="layui-btn layui-btn-primary layui-btn-xs">自定义</a>
            </div>
        </div>
    </div>

    <div class="layui-form-item pianyi">
        <div class="layui-inline">
            <label class="layui-form-label">消费次数：</label>
            <div class="layui-input-inline" style="width: 100px;">
                <input type="text" name="mixPurchaseTimes" placeholder="" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid">-</div>
            <div class="layui-input-inline" style="width: 100px;">
                <input type="text" name="maxPurchaseTimes" placeholder="" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-inline">
            <label class="layui-form-label" style="width: 100px;">累计消费金额：</label>
            <div class="layui-input-inline" style="width: 100px;">
                <input type="text" name="minTotalAmount" placeholder="￥" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid">-</div>
            <div class="layui-input-inline" style="width: 100px;">
                <input type="text" name="maxTotalAmount" placeholder="￥" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-inline">
            <label class="layui-form-label">关注时间：</label>
            <div class="layui-input-inline">
                <input class="layui-input" placeholder="开始日期" name="subscribeBeginDate" id="subscribeBeginDate">
            </div>
            <div class="layui-form-mid">--</div>
            <div class="layui-input-inline">
                <input class="layui-input" placeholder="截止日期" name="subscribeEndDate" id="subscribeEndDate">
            </div>
        </div>
    </div>

    <div class="layui-form-item pianyi">
        <div class="layui-inline">
            <label class="layui-form-label">客单价：</label>
            <div class="layui-input-inline" style="width: 100px;">
                <input type="text" name="mixUnitPrice" placeholder="" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid">-</div>
            <div class="layui-input-inline" style="width: 100px;">
                <input type="text" name="maxUnitPrice" placeholder="" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">性别：</label>
            <div class="layui-input-inline">
                <select name="gender" lay-filter="aihao">
                    <option value=""></option>
                    <option value="MALE">男</option>
                    <option value="FEMALE">女</option>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">储值状态：</label>
            <div class="layui-input-inline">
                <select id="rechargeStatus" name="rechargeStatus" lay-filter="aihao">
                    <option value=""></option>
                    <option value="YES">已储值</option>
                    <option value="NO">未储值</option>
                </select>
            </div>
        </div>
    </div>
    <div class="layui-form-item pianyi">
        <label class="layui-form-label">会员标签：</label>
        <a id="load-label" style="" class="layui-btn layui-btn-normal">加载会员标签</a>
        <a id="load-hidden" style="display: none" class="layui-btn layui-btn-normal">隐藏会员标签</a>
        <div id="show-label" class="layui-input-block">
            <%--次卡展示脚本内容--%>
            <script id="labelList" type="text/html">
                {{# layui.each(d.list, function(index, item){ }}
                <%-- <div class="layui-input-inline">--%>
                <input type="checkbox" name="memberTags[{{item.id}}]" value="{{item.id}}" title="{{item.labelName}}">
                <div class="layui-unselect layui-form-checkbox ">
                    <span <%--style="width:50px;overflow: hidden;textOverflow: ellipsis;"--%>>{{item.labelName}}</span>
                    <i class="layui-icon layui-icon-ok"></i>
                </div>
                <%--</div>--%>
                {{# }); }}
                {{# if(d.list.length === 0){ }}
                无数据
                {{# } }}

            </script>
            <%--  <input type="checkbox" name="like[write]" title="{{item.labelName}}">
              <div class="layui-unselect layui-form-checkbox layui-form-checked"><span>{{item.labelName}}</span>
                  <i class="layui-icon layui-icon-ok"></i>
              </div>--%>

        </div>
    </div>


    <div class="layui-inline" style="margin-top: -25px;"><label class="layui-form-label">触发条件：</label></div>
    <div class="layui-form-item pianyi">
        <div class="layui-inline">
            <label class="layui-form-label" style="width: 90px;">距上次消费：</label>
            <div class="layui-input-inline">
                <input type="text" name="awayConsumeDays" lay-verify="title" autocomplete="off" placeholder=""
                       class="layui-input">
            </div>
        </div>
        <div class="layui-inline" style="margin-left: -18px;">天</div>
    </div>
    <div class="layui-form-item pianyi">
        <div class="layui-inline">
            <label class="layui-form-label" style="width: 90px;">距生日天数：</label>
            <div class="layui-input-inline">
                <input type="text" name="awayBirthdayDays" lay-verify="title" autocomplete="off" placeholder=""
                       class="layui-input">
            </div>
        </div>
        <div class="layui-inline" style="margin-left: -18px;">天</div>
    </div>
    <div class="layui-form-item pianyi">
        <div class="layui-inline">
            <label class="layui-form-label" style="width: 90px;">距首次关注：</label>
            <div class="layui-input-inline">
                <input type="text" name="awaySubscribeDays" lay-verify="title" autocomplete="off" placeholder=""
                       class="layui-input">
            </div>
        </div>
        <div class="layui-inline" style="margin-left: -18px;">天</div>
    </div>


    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit="" id="nextStep" lay-filter="demo1">下一步</button>
            <button type="reset" id="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>


</form>
<%--下面是活动相关内容--%>
<form class="layui-form" action="" id="setActivityAttr" style="display: none">
    <hr>
    <div class="layui-form-item pianyi">
        <div class="layui-inline">
            <label class="layui-form-label">活动时间：</label>
            <div class="layui-input-inline">
                <input class="layui-input" placeholder="开始日期" name="activityBeginTime" id="activityBeginTime">
            </div>
            <div class="layui-form-mid">--</div>
            <div class="layui-input-inline">
                <input class="layui-input" placeholder="截止日期" name="activityEndTime" id="activityEndTime">
            </div>
        </div>
    </div>
    <div class="layui-form-item pianyi" style="margin-bottom: 20px;">
        <div class="layui-inline">
            <label class="layui-form-label">发送时间：</label>
            <div class="layui-input-inline">
                <input type="text" id="sendTime" name="sendTime" lay-verify="sendTime" autocomplete="off" placeholder=""
                       class="layui-input">
            </div>
        </div>
        <div class="layui-inline" style="margin-left: -18px;">时</div>
    </div>
    <div class="layui-form-item pianyi">
        <div class="layui-inline">
            <label class="layui-form-label">赠送内容：</label>
            <a id="chooseBut" onclick="page_show('选择卡券','./giveContent')" class="layui-btn layui-btn-primary"
               target="_blank">请选择</a>
            <input id="giveType" style="display: none" name="giveType" lay-verify="giveType" value="">
            <input id="giveTypeValue" style="display: none" name="giveTypeValue" lay-verify="giveType" value="">
            <span id="choosedContent"></span>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit="" id="complete" lay-filter="demo2">完成</button>
        </div>
    </div>
</form>




<!-- layui 弹窗后续独立封装 -->
<script>

   var content = "<div id=\"consumeInfoDiv\">\n" +
       "    <div class=\"layui-form-item\" style=\"margin-top: 20px;\margin-right: 62px;\">\n" +
       "        <div class=\"layui-inline\">\n" +
       "            <label class=\"layui-form-label\">近</label>\n" +
       "            <div class=\"layui-input-inline\" style=\"width: 100px;\">\n" +
       "                <input title='天' type=\"text\" id=\"consumeInfoLatestDay\" value=\"\" placeholder=\"请输入天数\" autocomplete=\"off\"\n" +
       "                       class=\"layui-input\">\n" +
       "            </div>\n" +
       "        </div>\n" +
       "    </div>\n" +
       "</div>"



    layui.use(['layer', 'form'], function () { //独立版的layer无需执行这一句
        var $ = layui.jquery, layer = layui.layer,form = layer.form; //独立版的layer无需执行这一句
        //触发事件
        var active = {
            offset: function (othis) {

                //var content = $("#consumeInfoDiv").html();
                //console.log("---------------" + content)
                var type = othis.data('type')
                    , text = othis.text();
                layer.open({
                    type: 1
                    , offset: type //具体配置参考：http://www.layui.com/doc/modules/layer.html#offset
                    , id: 'layerDemo' + type //防止重复弹出
                    , content: content
                    ,btn: ['确认','取消']
                    , btnAlign: 'c' //按钮居中
                    , shade: 0 //不显示遮罩
                    , yes: function (index) {
                        console.log(index);
                        if(index>=1) {
                            var day = document.getElementById("consumeInfoLatestDay").value;
                            var re =  /^[0-9]+$/; //判断字符串是否为数字 //判断正整数 /^[1-9]+[0-9]*]*$/
                            if (!re.test(day)) {
                                layer.alert('请输入大于0数字！', {
                                    icon: 5,
                                    title: "提示"
                                });
                                $("#consumeInfoLatestDayVal").attr("value","");
                                return false;
                            }
                            var consumeInfoLatestDayVal = document.getElementById("consumeInfoLatestDayVal").value;
                            $("#condiv").show();
                            $("#consumeInfoLatestDayVal").attr("value",day);
                            $("#consumeInfoLatestDayVal").attr("title","近"+day+"天")
                            $("#condiv>div>div").text("近"+day+"天")
                        }
                        layer.closeAll();
                    }
                });
            }
        };

        $('#layerDemo .layui-btn').on('click', function () {
            var othis = $(this), method = othis.data('method');
            active[method] ? active[method].call(this, othis) : '';
        });



    });


</script>


<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>

    var shopId = "";// 店铺编号
    var urlParam = "?shopId=";
    var id = GetQueryString("id");
    var selectedMemberTags;//被选中的会员标签集合
    var consumeInfoArr = [7,14,21,30,60,90];

    //获取标签列表接口
    var labelUrl = host + "/thtml/mif/getMifServerGet/label/labelList.thtml";
    var autoSendRuleAddUrl = host + "/thtml/mif/getMifServerPost/autoSendRule/add.thtml";
    var autoSendRuleUpdateUrl = host + "/thtml/mif/getMifServerPost/autoSendRule/update.thtml";
    var queryDetail = host + "/thtml/mif/getMifServerGet/autoSendRule/queryDetail.thtml?id=" + id;

    layui.use(['laytpl', 'form', 'layedit', 'laydate'], function () {
        var form = layui.form
            , layer = layui.layer
            , layedit = layui.layedit
            , laydate = layui.laydate
            , $ = layui.jquery
            , laytpl = layui.laytpl;
        //表单初始赋值
        if (!isNull(id)) {
            // 如果是查询隐藏对应按钮
            if ("detail" == GetQueryString("type")) {
                console.log("1111")
                $("input").addClass("layui-input layui-disabled");
                $("input").attr('readonly', true);
                $("textarea").attr('readonly', true);
                $(':radio').attr('disabled', true);
                $(':checkbox').attr('disabled', true);
                $(':button').attr('disabled', true);
                $('a').removeAttr('onclick');
                $('select').attr('disabled', true);
                $("#load-label").hide();
                $("#layerDemo").hide();
                $("#nextStep").hide();
                $("#reset").hide();
                $("#complete").hide();
                $("#chooseBut").hide();
            }
            $.get(queryDetail, function (data) {

                var filterCondition = eval('(' + data.data.filterCondition + ')');
                form.val('ruleForm', filterCondition);
                var triggerCondition = eval('(' + data.data.triggerCondition + ')');
                form.val('ruleForm', triggerCondition);
                form.val('ruleForm', {
                    shopId: data.data.shopId
                    , ruleName: data.data.ruleName
                    , activityBeginTime: data.data.activityBeginTime
                    , activityEndTime: data.data.activityEndTime
                })
                // 自定义按钮赋值
                var cv = filterCondition.consumeInfo;
                if(!isNull(cv) && consumeInfoArr.indexOf(cv) == -1) {
                    $("#condiv").show();
                    $("#consumeInfoLatestDayVal").attr("value",cv);
                    $("#condiv>div>div").text("近"+cv+"天")
                }
                selectedMemberTags = filterCondition.memberTags;
                //加载会员标签
                getTemplate(labelUrl, "show-label");
            });
        }


        //自定义验证规则
        form.verify({
            shopId: function (value) {
                if (value.length <= 0) {
                    return '店铺编号不能为空';
                }
            }
            , ruleName: function (value) {
                if (value.length <= 0) {
                    return '规则名称不能为空';
                }
            }
        });

        //点击下一步 ---》监听提交
        form.on('submit(demo1)', function (data) {

            //step.0 定义请求参数
            var requestParam = new Object();
            var filterConditionMap = new Object();
            var triggerConditionMap = new Object();
            var saveUrl;// 保存接口地址

            //step.1 组装filterCondition参数
            var memberTags = "";
            $.each($('input:checkbox:checked'), function () {
                memberTags += "'" + $(this).val() + "',"
            });
            memberTags = memberTags.substring(0, memberTags.length - 1);
            // 判断是否为空进行存储---
            filterConditionMap['subscribeStatus'] = data.field.subscribeStatus;//关注状态
            filterConditionMap['consumeInfo'] = data.field.consumeInfo;//消费时间
            filterConditionMap['mixPurchaseTimes'] = data.field.mixPurchaseTimes;//消费次左区间
            filterConditionMap['maxPurchaseTimes'] = data.field.maxPurchaseTimes;//消费次数右区间
            filterConditionMap['minTotalAmount'] = data.field.minTotalAmount;//累计消费金额左区间
            filterConditionMap['maxTotalAmount'] = data.field.maxTotalAmount;//累计消费金额右区间
            filterConditionMap['subscribeBeginDate'] = data.field.subscribeBeginDate;//关注时间左区间
            filterConditionMap['subscribeEndDate'] = data.field.subscribeEndDate;//关注时间右区间
            filterConditionMap['mixUnitPrice'] = data.field.mixUnitPrice;//客单价左区间
            filterConditionMap['maxUnitPrice'] = data.field.maxUnitPrice;//客单价右区间
            filterConditionMap['gender'] = data.field.gender;//性别
            filterConditionMap['rechargeStatus'] = data.field.rechargeStatus;//储值状态
            filterConditionMap['memberTags'] = memberTags;//会员标签

            //step.2 触发条件
            var awayConsumeDays = data.field.awayConsumeDays;// 距上次消费-天
            var awayBirthdayDays = data.field.awayBirthdayDays;// 距生日天数
            var awaySubscribeDays = data.field.awaySubscribeDays;//距首次关注
            var count = 0;
            var msg = "";
            if (!isNull(awayConsumeDays)) {
                count++;
            }
            if (!isNull(awayBirthdayDays)) {
                count++;
            }
            if (!isNull(awaySubscribeDays)) {
                count++;
            }
            if (count == 0) {
                msg = "触发必须有一个！"
            }
            if (count > 1) {
                msg = "触发条件有且只能有一个！"
            }
            if (count == 0 || count > 1) {
                layer.alert(msg, {
                    icon: 5,
                    title: "操作错误"
                });
                return false;
            }
            triggerConditionMap['awayConsumeDays'] = awayConsumeDays;
            triggerConditionMap['awayBirthdayDays'] = awayBirthdayDays;
            triggerConditionMap['awaySubscribeDays'] = awaySubscribeDays;

            //step.3 组装所有请求参数

            // 查询店铺信息是否存在
            shopId = data.field.shopId;
            var shopUrl = host+"/thtml/base/getShopInfo.thtml?shopId="+shopId;
            fetchHttp(shopUrl).then(res => {
                console.log("res--->"+res)
                if(res.code !="0000") {
                    layer.alert('校验店铺信息异常,请检查店铺编号是否错误！', {
                        icon: 5,
                        title: "提示"
                    });
                    return false;
                }
                if(shopId != res.data.shopId) {
                    layer.alert('请输入正确的店铺编号！', {
                        icon: 5,
                        title: "提示"
                    });
                    return false;
                }
            requestParam['shopId'] = data.field.shopId;//店铺编号
            id = GetQueryString("id");//id 丢的情况
            if (isNull(id)) {
                saveUrl = autoSendRuleAddUrl;
            } else {
                requestParam['id'] = id;
                saveUrl = autoSendRuleUpdateUrl;
            }
            requestParam['ruleName'] = data.field.ruleName;//规则名称
            requestParam['filterCondition'] = JSON.stringify(filterConditionMap);//触发条件
            requestParam['triggerCondition'] = JSON.stringify(triggerConditionMap);//触发条件

            console.log(JSON.stringify(requestParam));
            /*layer.alert(JSON.stringify(data.field), {
                title: '最终的提交信息' autoSendRuleUpdateUrl
            })*/
            //step.4 保存信息  @RequestBody

            $.ajax({
                url: saveUrl,
                data: requestParam,
                type: "post",
                success: function (data) {
                    console.log("响应码:" + data.code + " data:" + JSON.stringify(data.data));
                    if (data.code == "0000") {
                        layer.msg('保存成功');
                        id = data.data;

                        // 初始化第二个表单验证
                        $("#setActivityAttr").show();
                        form.verify({
                            sendTime: function (value) {
                                if (value.length <= 0) {
                                    return '发送时间不能为空';
                                }
                            }
                            , giveType: function (value) {
                                if (value.length <= 0) {
                                    return '赠送类型不能为空';
                                }
                            }
                        });
                    } else {
                        layer.msg(JSON.stringify(data.data));
                    }

                },
                error: function (data) {
                    console.log(data);
                    //$.toast("系统异常,请稍后重试", "cancel");
                }
            });
            });
            return false;
        });

        /**
         * step. 获取会员标签列表
         */
        $("#load-label").click(function (data) {
            //$("#load-label").hide();
            /*$("#load-hidden").show();
            $("#show-label").show();*/

            shopId = document.getElementById("shopId").value;
            labelUrl = labelUrl+"?shopId=" + shopId;
            if (isNull(shopId)) {
                layer.alert('店铺编号不能为空！', {
                    icon: 5,
                    title: "提示"
                });
                return false;
            }
            console.log(labelUrl)
            getTemplate(labelUrl, "show-label");
        });
        $("#load-hidden").click(function () {
            $("#load-hidden").hide();
            $("#load-label").show();
            $("#show-label").hide();
        });

        function getTemplate(url, viewId) {
            fetchHttp(url).then(res => {
                if (res.code === "0000") {
                    var data = { //数据
                        "title": "Layui常用模块"
                        , "list": res.data
                    }
                    var getTpl = labelList.innerHTML
                        , view = document.getElementById(viewId);
                    laytpl(getTpl).render(data, function (html) {
                        view.innerHTML = html;
                    });
                    form.render('checkbox');
                    // 判断是否需要初始化表单
                    var obj = new Map();
                    obj["memberTags[17]"] = true;
                    var array = selectedMemberTags.split(',');
                    for (var i in array) {
                        obj["memberTags[" + array[i].replace(/'/g, '') + "]"] = true;
                    }
                    //console.log(array[0].replace(/'/g, ''))
                    form.val('ruleForm', eval('(' + JSON.stringify(obj) + ')'));
                }
            }).catch(e => {
                console.log(e)
            });
        }


        // 点击完成
        form.on('submit(demo2)', function (data) {
            var requestParam = new Object();
            requestParam['id'] = isNull(GetQueryString("id"))?id:GetQueryString("id");
            requestParam['activityBeginTime'] = data.field.activityBeginTime;
            requestParam['activityEndTime'] = data.field.activityEndTime;
            requestParam['activityEndTime'] = data.field.activityEndTime;
            requestParam['giveType'] = data.field.giveType;
            requestParam['giveTypeValue'] = data.field.giveTypeValue;
            $.ajax({
                url: autoSendRuleUpdateUrl,
                data: requestParam,
                type: "post",
                success: function (data) {
                    console.log("响应码:" + data.code + " data:" + JSON.stringify(data.data));
                    if (data.code == "0000") {
                        layer.msg('保存成功');
                        id = data.data;
                    } else {
                        layer.msg('系统异常');
                    }
                },
                error: function (data) {
                    console.log(data);
                    //$.toast("系统异常,请稍后重试", "cancel");
                }
            });
            return false;

        });


        //执行一个laydate实例
        laydate.render({
            elem: '#subscribeBeginDate'//指定元素
        });
        laydate.render({
            elem: '#activityBeginTime' //指定元素
        });
        //执行一个laydate实例
        laydate.render({
            elem: '#subscribeEndDate' //指定元素
        });
        laydate.render({
            elem: '#activityEndTime' //指定元素
        });

    });


    /**
     参数解释：
     title   标题
     url     请求的url
     id      需要操作的数据id
     w       弹出层宽度（缺省调默认值）
     h       弹出层高度（缺省调默认值）
     **/
    function page_show(title, url, w, h) {

        if (title == null || title == '') {
            title = false;
        }
        if (url == null || url == '') {
            url = "404.html";
        }
        if (w == null || w == '') {
            w = ($(window).width() * 0.9);
        }
        if (h == null || h == '') {
            h = ($(window).height() - 300);
        }
        if (!isNull(urlParam)) {
            url = url + urlParam+shopId;
        }
        console.log(h);
        layer.open({
            type: 2,
            offset: 't',
            area: [w + 'px', h + 'px'],
            btnAlign: 'c',
            fix: false, //不固定
            maxmin: true,
            shadeClose: true,
            shade: 0.4,
            title: title,
            content: url
        });
    }

    /*关闭弹出框口*/
    function page_close() {
        var index = parent.layer.getFrameIndex(window.name);
        parent.layer.close(index);
    }

</script>
</body>
</html>
